<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 11:08:59
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 15:33:18
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===watch==={{ obj.count }}
    <button @click="btn">按钮</button>
  </div>
</template>
<script>
import { reactive, watch } from 'vue'
export default {
  name: '',
  setup () {
    const obj = reactive({
      count: 10
    })

    const obj2 = reactive({
      n: 1
    })

    const btn = () => {
      obj.count += 5
      obj2.n += 2
    }

    /* 
    V2:
    // watch:{
    //   obj(newVal,oldVal){

    //   }
    // }

     watch:{
      obj:{
        handler(){},
        deep:true,
        immediate:true
      }
    }
    */
    // watch(监听对象, 函数, 对象[{ deep, immediate }])
    /* 方法1： */
    // watch(obj, () => {
    //   console.log(1111);
    // }, {
    //   deep: true  // 可以不写
    // })
    //  方法2
    // watch(() => obj.count, () => {
    //   console.log(1111);
    // }, {
    //   // deep: true // 可以不写
    // })

    //方法3：同时监听多个
    // watch(obj, () => {
    //   console.log(1111);
    // }, {
    //   deep: true  // 可以不写
    // })
    // watch(obj2, () => {
    //   console.log(222);
    // }, {
    //   deep: true  // 可以不写
    // })
    // watch([obj, obj2], () => {
    //   console.log(1111);
    // }, {
    //   // deep: true  // 可以不写
    // })

    //方法4：监听对象中的属性
    watch(() => obj, () => {
      // console.log(1111);
    }, {
      immediate: true,
      deep: true  // 必须写
    })


    /* 总结：直接监听对象不需要写deep,监听的是箭头函数返回的对象就写deep */

    return { obj, btn }
  }
}
</script>
<style lang='less'  scoped>
</style>